<template>
  <div>
    <tiny-button style="margin-bottom: 20px" @click="switchTheme">切换主题</tiny-button>
    <h3 class="title">折线图</h3>
    <div class="content">
      <tiny-chart type="line" :options="options1"></tiny-chart>
    </div>

    <h3 class="title">柱状图</h3>
    <div class="content">
      <tiny-chart type="histogram" :options="options2"></tiny-chart>
    </div>

    <h3 class="title">饼图</h3>
    <br />
    <tiny-button style="margin-bottom: 20px" @click="switchColorMode">color-mode 切换</tiny-button>
    <div class="content">
      <tiny-chart
        type="ring"
        @handle-color="handleColor"
        :options="options3"
        :color-mode="colorMode"
        :key="key"
      ></tiny-chart>
    </div>
  </div>
</template>

<script lang="jsx">
import { TinyHuicharts } from '@opentiny/vue-huicharts'
import { TinyButton } from '@opentiny/vue'

export default {
  components: {
    TinyChart: TinyHuicharts,
    TinyButton
  },
  methods: {
    switchTheme() {
      if (this.themesKey < this.themes.length - 1) {
        this.themesKey++
      } else {
        this.themesKey = 0
      }
      this.options1.theme = this.themes[this.themesKey]
      this.options2.theme = this.themes[this.themesKey]
    },
    switchColorMode() {
      const colorModes = ['default', 'blue', 'green']
      this.colorMode = colorModes[(this.key + 1) % 3]
      this.key++
    },
    handleColor(color) {
      console.log('handle-color', color)
    }
  },
  data() {
    return {
      options1: {
        padding: [50, 30, 50, 20],
        legend: {
          show: true,
          icon: 'line'
        },
        data: [
          { Month: 'Jan', Domestics: 33, Abroad: 37 },
          { Month: 'Feb', Domestics: 27, Abroad: 39 },
          { Month: 'Mar', Domestics: 31, Abroad: 20 },
          { Month: 'Apr', Domestics: 30, Abroad: 15 },
          { Month: 'May', Domestics: 37, Abroad: 13 },
          { Month: 'Jun', Domestics: 36, Abroad: 17 },
          { Month: 'Jul', Domestics: 42, Abroad: 22 },
          { Month: 'Aug', Domestics: 22, Abroad: 12 },
          { Month: 'Sep', Domestics: 17, Abroad: 30 },
          { Month: 'Oct', Domestics: 40, Abroad: 33 },
          { Month: 'Nov', Domestics: 42, Abroad: 22 },
          { Month: 'Dec', Domestics: 32, Abroad: 11 }
        ],
        xAxis: {
          data: 'Month'
        },
        yAxis: {
          name: 'Percentage(%)'
        }
      },
      options2: {
        padding: [50, 30, 50, 20],
        legend: {
          show: true,
          icon: 'line'
        },
        data: [
          { Month: 'Jan', Domestics: 33, Abroad: 37 },
          { Month: 'Feb', Domestics: 27, Abroad: 39 },
          { Month: 'Mar', Domestics: 31, Abroad: 20 },
          { Month: 'Apr', Domestics: 30, Abroad: 15 },
          { Month: 'May', Domestics: 37, Abroad: 13 },
          { Month: 'Jun', Domestics: 36, Abroad: 17 },
          { Month: 'Jul', Domestics: 42, Abroad: 22 },
          { Month: 'Aug', Domestics: 22, Abroad: 12 },
          { Month: 'Sep', Domestics: 17, Abroad: 30 },
          { Month: 'Oct', Domestics: 40, Abroad: 33 },
          { Month: 'Nov', Domestics: 42, Abroad: 22 },
          { Month: 'Dec', Domestics: 32, Abroad: 11 }
        ],
        xAxis: {
          data: 'Month'
        },
        yAxis: {
          name: 'Percentage(%)'
        }
      },
      options3: {
        type: 'pie',
        data: [
          { value: 100, name: 'VPC' },
          { value: 90, name: 'IM' },
          { value: 49, name: 'EIP' },
          { value: 14, name: 'SG' }
        ]
      },
      colorMode: 'default',
      key: 0,
      themeName: {
        backgroundColor: '#2bf666'
      },
      newTheme: null,
      themes: ['light', 'cloud-light', 'hdesign-light', 'bpit-light'],
      themesKey: 1
    }
  }
}
</script>

<style scoped>
.title {
  font-size: 16px;
  font-weight: 500;
}
</style>
